<template>
  <div style="text-align: left; background-color: #f6f7f9; height:670px;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar left-text="订单详情" style="background: #f6f7f9; padding:10px 10px 10px 0;"
                   @click-left="$router.replace('/home/receive-list')">
        <template #left>
          <a style="font-size: 21px; font-weight: bold">
            <van-icon name="arrow-left" size="20" color="#000"/>
            {{ orderInfo.status }}
          </a>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div>
      <van-cell :label="orderInfo.address">
        <template #icon>
          <van-icon name="free-postage" size="40" style="padding-right: 10px;"/>
        </template>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="name" style="font-weight: bold;">{{ orderInfo.name }}</span>
          <span class="tel" style="margin-left: 20px;">{{ orderInfo.tel }}</span>
        </template>
      </van-cell>
    </div>
    <van-cell title="快递公司" :value="orderInfo.company"/>
    <van-cell title="取件信息" :value="orderInfo.message"/>
    <van-cell title="订单备注" :value="orderInfo.remark"/>
    <van-cell title="订单编号" :value="orderInfo.sn"/>
    <van-cell v-if="orderInfo.staffName!=null" title="配送员姓名" :value="orderInfo.staffName"/>
    <van-cell v-if="orderInfo.staffPhone!=null" title="配送员手机号" :value="orderInfo.staffPhone"/>
    <van-cell v-if="orderInfo.payTime!=null" title="支付时间" :value="orderInfo.payTime"/>

    <div style="background: white; padding: 15px; text-align: right;">
      <van-button v-if="orderInfo.status=='派送中'" @click="setComplete" round type="info">完成订单</van-button>
      <van-button v-if="orderInfo.status=='订单完成'" @click="deleteOrder" round type="danger">删除订单</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderDetails",
  data() {
    return {
      show_message: false,
      show_remark: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      orderInfo: {
        id: '',
        name: '周杰伦',
        tel: '15770641554',
        address: '江西省宜春市袁州区宜春学院',
        company: '京东速递',
        message: '1-1356',
        remark: '下午送到就行',
        status: '',
        staffName: '',
        staffPhone: '',
        isEvaluate: '',
        sn: '2301272039309189248',
        payTime: '',
      },
    };
  },
  methods: {
    loadOrderDetails() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let id = localStorage.getItem('id');
      let url = 'http://localhost:9080/orders/' + id + '/detail';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        if (responseBody.status == 2) {
          responseBody.status = '派送中'
        } else if (responseBody.status == 3) {
          responseBody.status = '订单完成'
        } else if (responseBody.status == 4) {
          responseBody.status = '订单异常'
        }
        if (responseBody.type == 1) {
          responseBody.type = '支付宝'
        } else if (responseBody.type == 2) {
          responseBody.type = '微信'
        } else if (responseBody.type == 3) {
          responseBody.type = '线下'
        }
        this.orderInfo = responseBody;
        console.log("当前表单数据->>>>>>", this.orderInfo);
      })
    },

    setComplete(){
      this.$dialog.confirm({
        title: '完成订单',
        message: '请确认您的订单是否已完成？',
      })
          .then(() => {
            let url = 'http://localhost:9080/orders/' + this.orderInfo.id + '/complete';
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .post(url).then((response) => {
              let responseBody = response.data;
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$toast.success('操作成功!');
                this.$router.replace("/home/receive-list");
              } else {
                this.$toast.fail(responseBody.message);
              }
            });
          })
          .catch(() => {

          });
    },
    deleteOrder() {
      this.$dialog.confirm({
        title: '删除订单',
        message: '删除订单后将无法恢复，如需恢复请联系管理员，是否继续？',
      })
          .then(() => {
            let url = 'http://localhost:9080/orders/' + this.orderInfo.id + '/delete-user';
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .post(url).then((response) => {
              let responseBody = response.data;
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$toast.success('删除订单成功!');
                this.$router.replace("/home/receive-list");
              } else {
                this.$toast.fail(responseBody.message);
              }
            });
          })
          .catch(() => {

          });
    },
  },
  mounted() {
    this.loadOrderDetails();
  }
}
</script>

<style scoped>

</style>
